<template>
    <div class="modal fade" id="batch_transfer" tabindex="-1" role="dialog"
         aria-labelledby="batch_transfer">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="searchFor_box">
                        <div class="g-form-line">
                            <div class="batch_transfer_box">
                                <div class="searchFor_left">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">
                                            <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                        </span>
                                    </button>
                                    <p>批量转移</p>
                                </div>
                                <div class="searchFor_right">
                                    <p class="text_1">目标客户</p>
                                    <input type="text" class="customersSelect" readonly placeholder="请选择"
                                           v-model="customerName">
                                    <div class="dropdown">
                                        <span class=" dropdown-toggle text_9" type="button" id="dropdownMenu1"
                                              data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                             <img src="../../assets/images/home_image/transfer_pull.png" alt=""
                                                  class="text_2_img">
                                        </span>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                            <li @click="getCustomerName(customer)" v-for="customer in customers">
                                                <a href="#">{{customer.userName}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="text_3">转移设备</p>
                                    <input type="text" class="text_4" maxlength="15" placeholder="请输入设备号(IMEI)"
                                           v-model="imei">
                                    <img src="../../assets/images/home_image/transfer_add.png" alt="添加"
                                         class="text_5" @click="addEquip">
                                    <div class="text_6">
                                        <table>
                                            <thead>
                                            <tr class="text_6_nav">
                                                <th class="number">编号</th>
                                                <th class="equipmentName">设备名</th>
                                                <th class="equipmentId">设备号(ID)</th>
                                                <th class="ownUser">所属用户</th>
                                                <th class="operating">操作</th>
                                            </tr>
                                            </thead>
                                        </table>
                                        <div class="tbody">
                                            <table>
                                                <tbody>
                                                <tr v-for="(equip,index) in equips">
                                                    <td class="number">{{ index + 1 }}</td>
                                                    <td class="equipmentName">{{ equip.equipName }}</td>
                                                    <td class="equipmentId">{{ equip.id }}</td>
                                                    <td class="ownUser">{{ equip.userNickname }}</td>
                                                    <td class="operating"><span class="button"
                                                                                @click="remove(index)">删除</span></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer searchFor_bottom">
                                        <button type="button" class="btn btn-success searchFor_right_leftBtn"
                                                @click="confirm">
                                            确定
                                        </button>
                                        <button type="button" class="btn btn-success export  searchFor_right_rightBtn"
                                                data-dismiss="modal">
                                            取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                imei: '',
                customerName: '',
                customers: [], // 目标客户
                equips: [], // 设备列表
                newDealerId: '', //新经销商id
                oldDealerId: '', //旧经销商id
            }
        },
        methods: {
            getDealer (data) {
                this.customers = data.dealers
                this.equips = data.equips
                this.oldDealerId = data.admin.id ? data.admin.id : data.admin.userId
                this.equips.forEach((v) => {
                    v.userNickname = data.admin.userNickname
                })
            },
            getCustomerName (user) {
                this.customerName = user.userName
                this.newDealerId = Number(user.userId)
            },
            /**
             * 增加设备
             */
            addEquip () {
                if (this.imei === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.imeiEmpty})
                    return
                }
                /**
                 * 查询到设备，根据设备的dealerId查询所属用户
                 */
                this.$ajax
                    .equip
                    .queryEquip(this.imei)
                    .then(res => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result === undefined) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.queryEmpty})
                                return
                            }
                            if (result.result.dealerId === undefined) {
                                this.equips.push(result.result)
                                return
                            }
                            this.$ajax
                                .userInfo
                                .queryUserById(result.result.dealerId)
                                .then(res => {
                                    let data = res.data
                                    if (data.code === 200) {
                                        if (data.result !== undefined) {
                                            result.result.userNickname = data.result.userNickname
                                        }
                                        this.equips.push(result.result)
                                    }
                                }, () => {
                                    this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                                })
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#batch_transfer').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            /*
            删除
             */
            remove (index) {
                this.equips.splice(index, 1)
            },
            confirm () {
                if (this.newDealerId === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.aimEmpty})
                    return
                }
                let params = {
                    ids: '',
                    newDealerId: this.newDealerId,
                    oldDealerId: this.oldDealerId
                }
                this.equips.forEach((v, i) => {
                    params.ids += v.id + ','
                })
                this.$ajax
                    .equip
                    .batchMove(params)
                    .then(res => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.operationSuc})
                            this.$emit('refreshMenu')
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#batch_transfer').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#batch_transfer').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }
</script>

<style scoped>

    .searchFor_box {
        width: 930px;
        height: 500px;
    }

    .modal-dialog {
        width: 750px;
        height: 500px;
    }

    .g-form-line {
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .modal-body {
        margin: 0;
        padding: 0;
        width: 750px;
        height: 500px;
    }

    .batch_transfer_box {
        width: 750px;
        height: 500px;
        position: relative;
    }

    .searchFor_left {
        position: absolute;
        width: 180px;
        height: 500px;
        background: #263238;
    }

    .searchFor_right {
        position: relative;
        width: 530px;
        height: 500px;
        margin-left: 180px;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .searchFor_left p {
        color: rgb(23, 210, 156);
        text-align: center;
        line-height: 500px;
        font-size: 16px;
    }

    .searchFor_right .text_1 {
        position: absolute;
        top: 15px;
        left: 15px;
        color: rgb(23, 210, 156);
        font-size: 14px;
    }

    .dropdown-menu {
        position: absolute;
        left: 25px;
        top: 80px;
        height: 300px;
        overflow: auto;
        background: #2F3A40;
    }

    .dropdown-menu a {
        color: #fff;
    }

    .dropdown-menu > li > a:hover {
        background: #2F3A40;
        color: rgb(23, 210, 156);
    }

    .customersSelect {
        position: absolute;
        left: 16px;
        top: 50px;
        width: 180px;
        height: 30px;
        border-radius: 5px;
        padding-left: 7px;
        font-size: 8px;
        line-height: 150px;
        border: 1px solid rgb(204, 204, 204);
        color: rgb(153, 153, 153);
    }

    .text_2_img {
        position: absolute;
        top: 56px;
        left: 220px;
        margin-left: 14px;
        cursor: pointer;
    }

    .searchFor_right .text_3 {
        position: absolute;
        top: 115px;
        left: 15px;
        color: rgb(23, 210, 156);
        font-size: 14px;
    }

    .searchFor_right .text_4 {
        position: absolute;
        width: 180px;
        height: 30px;
        top: 145px;
        left: 15px;
        border-radius: 5px;
        padding-left: 7px;
        font-size: 8px;
        line-height: 150px;
        border: 1px solid rgb(204, 204, 204);
        color: rgb(153, 153, 153);
    }

    .searchFor_right .text_5 {
        position: absolute;
        top: 148.5px;
        left: 220px;
        margin-left: 14px;
        cursor: pointer;
    }

    table {
        font-size: 16px;
    }

    .tbody {
        overflow: auto;
        height: 206px;
    }
    .tbody td{
        padding: 0 10px;
    }
    .searchFor_right .text_6 {
        position: absolute;
        top: 185px;
        left: 15px;
    }
    .searchFor_right .text_6 th,.searchFor_right .text_6 td{
        font-size: 12px;
    }
    .text_6_nav {
        background: rgb(240, 240, 240);
        color: rgb(153, 153, 153);
    }

    .text_6_nav tr td {
        color: rgb(102, 102, 102);
    }

    .text_6 .number {
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .text_6 .equipmentName {
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .text_6 .equipmentId {
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .text_6 .ownUser {
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .text_6 .operating {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .searchFor_right_leftBtn {
        position: absolute;
        top: 20px;
        left: 128px;
        color: white;
        background: #17d29c;
        border-radius: 5px;
    }

    .searchFor_right_rightBtn {
        position: absolute;
        left: 300px;
        top: 20px;
    }

    .modal-footer {
        position: absolute;
        width: 568px;
        height: 70px;
        background: #e9f6f2;
        bottom: 0;
        border: 0;
        display: inline;
    }


</style>
